<template>
    <div class="config-box">
        <div class="title-box">
            <h3>所有额外属性:</h3>
            <svg class="icon" aria-hidden="true" @click="close">
                <use xlink:href="#icon-cuowuguanbiquxiao"></use>
            </svg>
        </div>
        <div class="config-items">
            <div v-for="(item,index) in allAttribute" :key="index" class="items-box">
                <span class="item-bg">
                    {{item.value}}
                </span>  
                <button class="item-btn" @click="del(item)">删除</button>
            </div>
        </div>
        <hr>
        <div class="item-add">
            <input type="text" v-model="newAttrs">
            <button class="btn-add" @click="addAttrs" >添加属性</button>
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
    name:'attribute',
    data() {
        return {
            newAttrs:'',
        }
    },
    computed: {
        ...mapState({
            allAttribute:(state) => state.attribute.allAttribute
        })
    },
    async mounted() {
        // 获取所有额外属性
        this.initAttribute();
    },
    methods: {
        // 关闭项目详情弹窗
        close() {
            this.$emit("closeAttibute");
        },
        // 获取额外属性
        ...mapActions({ initAttribute: 'initAttribute'}),
        // 新增额外属性
        addAttrs(){
            if (this.newAttrs) {
                this.$confirm(`是否确认新增${this.newAttrs}属性`,async ()=> {
                    let res = await this.$api.projectMessage.addAttribute(this.newAttrs);
                    if (res.code == "success") {
                        this.$message.success('新增属性成功！');
                        this.initAttribute();
                        this.newAttrs = ''
                    }else {
                        this.$message.error('新增属性失败！');
                    }
                })
            }else {
                this.$message.warning('请输入新增属性！');
            }
        },
        // 删除额外属性
        del(item){
            let id = item.id
            if (id) {
                this.$confirm(`是否确认删除${item.value}属性`,async ()=> {
                    let res = await this.$api.projectMessage.delAttribute(id);
                    if (res.code == "success") {
                        this.$message.success('删除属性成功！');
                        this.initAttribute();
                    }else {
                        this.$message.error('删除属性失败！');
                    }
                })
            }
        },
       
    }
}
</script>
<style lang="scss" scoped>
@import './attributeConfig.scss';
</style>